<template>
  <div class="accessory">

    <div class="butGroup">
      <el-button type="primary" @click="addDialogVisible = true">新增轮播图</el-button>
      <el-button @click="search">重新加载</el-button>
    </div>
    
    <el-divider />
    <div v-if="tableList.length > 0" class="table">
      <!-- 表格展示 -->
      <el-table :data="tableList" stripe style="width: 100%" v-loading="tableLoading">
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="轮播图">
          <template #default="scope">
            <el-image :src="scope.row.url" width="80" />
          </template>
        </el-table-column>
        
        <el-table-column prop="goods.name" label="计算机名" />
        <el-table-column label="计算机图片">
          <template #default="scope">
            <el-image :src="scope.row.goods.picture" width="80" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="190" />
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="showUpdate(scope.row.id)">修改</el-button>
            <el-button link type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 空状态 -->
    <div v-if="tableList.length <= 0">
      <el-empty description="暂无数据" />
    </div>
  </div>

  <!-- 新增弹出框 -->
  <el-dialog v-model="addDialogVisible" title="新增轮播图" width="40%">
    <div class="addForm">
      <el-form :label-position="'right'" :model="addform">
        <el-form-item label="名称" class="addFormItem">
          <el-input v-model="addform.name" placeholder="请输入轮播图名称" clearable />
        </el-form-item>
        <el-form-item label="计算机" class="addFormItem">
          <el-select v-model="addform.goodsId" filterable remote reserve-keyword collapse-tags collapse-tags-tooltip
            placeholder="请选选择对应的计算机" :remote-method="remoteMethod" :loading="selectLoading">
            <el-option v-for="goods in goodsList" :key="goods.id" :label="goods.name"
              :value="goods.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="计算机图片" class="addFormItem">
          <img-upload v-model:picture="addform.url" />
        </el-form-item>

        <el-form-item label="描述" class="addFormItem">
          <el-input v-model="addform.description" maxlength="100" placeholder="请输入计算机的描述" show-word-limit
            type="textarea" />
        </el-form-item>

        
      </el-form>
    </div>

    <template #footer>
      <el-button type="primary" @click="pictureAdd">新增</el-button>
      <el-button type="info" @click="addDialogVisible = false">取消</el-button>
    </template>
  </el-dialog>

  <!-- 修改弹出框 -->
  <el-dialog v-model="updateDialogVisible" title="修改轮播图" width="40%">
    <div class="addForm">
      <el-form :label-position="'right'" :model="updateForm">
        <el-form-item label="名称" class="addFormItem">
          <el-input v-model="updateForm.name" placeholder="请输入轮播图名称" clearable />
        </el-form-item>
        <el-form-item label="计算机" class="addFormItem">
          <el-select v-model="updateForm.goodsId" filterable remote reserve-keyword collapse-tags collapse-tags-tooltip
            placeholder="请选选择对应的计算机" :remote-method="remoteMethod" :loading="selectLoading">
            <el-option v-for="goods in goodsList" :key="goods.id" :label="goods.name"
              :value="goods.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="计算机图片" class="addFormItem">
          <img-upload v-model:picture="updateForm.url" />
        </el-form-item>

        <el-form-item label="描述" class="addFormItem">
          <el-input v-model="updateForm.description" maxlength="100" placeholder="请输入计算机的描述" show-word-limit
            type="textarea" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button type="primary" @click="pictureUpdate">修改</el-button>
      <el-button type="info" @click="updateDialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { list, deleteById, addPicture, getById , updateById} from '@/api/picture.js';
import { selectGoods } from '@/api/goods.js';
import { onMounted, reactive, ref } from "vue";
import { ElLoading, ElMessageBox } from 'element-plus'
import ImgUpload from '@/components/ImgUpload.vue';

const tableLoading = ref(false);
// 新增弹框是否显示
const addDialogVisible = ref(false);
const selectLoading = ref(false);
const updateDialogVisible = ref(false);
// 表格展示数据
const tableList = ref([]);
// 计算机选择框
const goodsList = ref([]);


// 新增配件表单
const addform = reactive({
  goodsId: null,
  name: null,
  description: null,
  url: null
})

// 修改表单
const updateForm = reactive({
  id: null,
  goodsId: null,
  name: null,
  description: null,
  url: null
})

onMounted(async () => {
  // 查询所有配件信息
  await search()
})

// 显示弹出框
const showUpdate = async(id)=>{
  const response = await getById(id);
  const data = response.data.data;
  updateForm.id = data.id;
  updateForm.name = data.name;
  updateForm.url = data.url;
  updateForm.goodsId = data.goodsId;
  updateForm.description = data.description;
  // 显示弹框
  updateDialogVisible.value = true;
}

// 修改图片信息
const pictureUpdate = async()=>{
  const loading = ElLoading.service({ fullscreen: true })
  try {
    await updateById(updateForm);
    // 重新查询
    await search();
  } finally {
    // 关闭弹框
    updateDialogVisible.value = false;
    // 清空表单数据
    claerUpdateForm();
    // 停止加载
    loading.close();
  }
}

// 清除表单
const claerUpdateForm = ()=>{
  updateForm.id = null;
  updateForm.name = null;
  updateForm.url = null;
  updateForm.goodsId = null;
  updateForm.description = null;
}

// 远程搜索
const remoteMethod = async (val) => {
  console.log(val);
  if(!val){
    return;
  }
  selectLoading.value = true
  const response = await selectGoods(val);
  goodsList.value = response.data.data;
  selectLoading.value = false
}

// 查询所有
const search = async () => {
  try {
    // 开启加载
    tableLoading.value = true;
    const response = await list();
    tableList.value = response.data.data;
  } finally {
    tableLoading.value = false;
  }
};





// 删除数据
const deleteData = async (id) => {

  try {
    await ElMessageBox.confirm(
      '确定要删除此轮播图吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await deleteById(id);
    // 删除后，重新刷新列表
    await search();
  } catch (e) {
  }
}



/**
 * 新增轮播图
 */
const pictureAdd = async () => {
  const loading = ElLoading.service({ fullscreen: true })
  try {
    await addPicture(addform)
    await search()
  } finally {
    // 关闭弹框
    addDialogVisible.value = false;
    // 清空表单数据
    claerAddForm();
    // 停止加载
    loading.close()
  }
}

// 清空表单
const claerAddForm = () => {
  addform.goodsId = null;
  addform.name = null;
  addform.description = null;
  addform.url = null;
}


</script>

<style scoped>


.addForm {
  width: 300px;
  margin: auto;
}

.addFormItem {
  width: 300px;
}
</style>